<template>
  <div class="home">
    <input v-focus type="text" 
    @input="onInput"
    v-model="value"
    @keydown.enter="onEnter"/>
    <div class="history" v-show="isShowHistory">
      <div v-for="(item,index) in history"
      :key="index">{{item}}</div>
    </div>
    <div class="recommand" v-show="isShowRecommand">
      <div v-for="(item,index) in recommand"
      :key="index" v-html="item"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      value:"",
      isShowHistory:true,
      isShowRecommand:false
    }
  },
  computed:{
    recommand:function(){
      var temp = [];
      this.$store.state.recommand.forEach((element)=>{
        if(element.includes(this.value)){
          element=element.replace(this.value,`<font style="color:red">${this.value}</font>`);
          temp.push(element);
        }
      })
      return temp;
    },
    history:function(){
      return this.$store.state.history
    }
  },
  methods:{
    onInput(){
      window.console.log(this.value)
      if(this.value.length === 0){
        this.isShowHistory = true;
        this.isShowRecommand = false;
      }else{
        this.$store.dispatch("FILTER_KEYWORDS",this.value)
        this.isShowHistory = false;
        this.isShowRecommand = true;
      }
    },
    onEnter(){
      window.console.log("111111")
      this.$store.dispatch("CHANGE_HISTORY",this.value)
    }
  },
  directives:{
    focus:{
      bind(){
        window.console.log("指令即将绑定到元素")
      },
      inserted(el){
        el.focus();
      },
      update(){

      }
    }
  }
}
</script>

<style scoped>
.history
{
  width: 100%;
  height: 400px;
  background-color: red;
}

.recommand
{
  width: 100%;
  height: 400px;
  background-color: pink;
}
</style>
